<template>
  <div class="mySpecialCard">
    <div class="meta"></div>
    <router-link to="/">
      <img :src="img" alt="" />
      <div class="item_cont">
        <div class="cont_left">
          <p class="title">{{ title }}</p>
          <p class="desc">{{ desc }}</p>
        </div>
        <div class="cont_price">￥{{ price }}起</div>
      </div></router-link
    >
    <div class="btm">
      <div class="btm_left">
        <span style="margin-right: 20px"
          ><i class="iconfont icon-xihuan"></i>{{ like }}</span
        >
        <span><i class="iconfont icon-browse"></i>{{ watchs }}</span>
      </div>
      <div class="btm_right">
        <span><i class="iconfont icon-xiaoxi3"></i>{{ news }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    img: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    price: {
      type: Number,
      default: "",
    },
    like: {
      type: Number,
      default: "",
    },
    watchs: {
      type: Number,
      default: "",
    },
    news: {
      type: Number,
      default: "",
    },
  },
  name: "mySpecialCard",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.mySpecialCard {
  flex: 1;
  position: relative;
  img {
    width: 100%;
    height: 360px;
  }
  .btm {
    position: absolute;

    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 72px;
    line-height: 72px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .item_cont {
    position: absolute;
    bottom: 72px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #fff;
    padding: 10px 10px;
    line-height: 30px;

    .cont_left {
      width: 70%;
      .title,
      .desc {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .title {
        font-size: 20px;
        font-weight: 600;
      }
      .desc {
        color: #999;
      }
    
    }
    .cont_price{
        background-color: #fff;
        padding: 2px 10px;
        border-radius: 5px;
        color: var(--price);
    }
  }
  .meta {
    background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.8),
      transparent 50%
    );
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 292px;
  }
}
</style>